<template>
	<view class="content" :style="'min-height:'+windowHeight+'px;'">
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
			bgcolor="#FFF"></skeleton>
		<view v-if="!errorNetwork" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<!-- 导航 -->
			<home-navi :shopName="shopName" :logoUrl="logoUrl" @goLogin="openAuto"></home-navi>
			<!-- 轮播 -->
			<home-swiper :dataList="dataBanner"></home-swiper>
			<!-- 菜单 -->
			<home-menus :isShow="is_show" :dataList="dataMenus" @goLogin="openAuto"></home-menus>
			<!-- 图片立方体 -->
			<home-cube :medicalId="medicalId" @goLogin="openAuto"></home-cube>
			<!-- 热门医生 -->
			<home-hot :dataList="dataDoctor" @goLogin="openAuto"></home-hot>
			<!-- 健康科普 -->
			<home-article :dataList="dataArticle" @goLogin="openAuto"></home-article>
			<!-- 视频课堂 -->
			<!-- <home-video :dataList="dataVideo" @goLogin="openAuto"></home-video> -->
		</view>
		<view v-else>
			<view class="error-network skeleton-rect">
				<image src="/static/images/error-network.png"></image>
				<view class="title">网络连接断开</view>
				<view class="con">
					<view class="label">请检查情况：</view>
					<view class="item">· 在设置中是否已开启网络权限</view>
					<view class="item">· 当前是否处于弱网环境</view>
					<view class="item">· 版本是否过低，升级试试吧</view>
				</view>
				<view class="btn" @click="reconnect">重新连接</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="privacy-wrapper" v-if="privacyStatus">
			<view class="privacy-box">
				<view class="title">服务协议与隐私政策</view>
				<view class="content">
					请务必审慎阅读、充分理解“服务协议与 隐私政策”各条款，包括但不限于：为了 向你提供即时通讯、内容分享等服务，我 们需要收集你的设备信息、操作日志等个
					人信息。你可以在“设置”中查看、变更、 删除个人信息并管理你的授权。
					<br />
					你可以阅读
					<navigator url="/pages/users/privacy/index">《服务协议与隐私政策》</navigator>
					了解 详细信息。如你同意，请点击“我同意”开始接受我们的服务。
				</view>
				<view class="btn-box">
					<view class="btn-item" @click="confirmApp">我同意</view>
					<view class="btn" @click="closeModel">随便逛逛</view>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
			:isGoIndex="false"></authorize>
		<!-- #ifndef H5 -->
		<passwordPopup></passwordPopup>
		<!-- #endif -->

	</view>
</template>

<script>
	const app = getApp();
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
	import authorize from '@/components/Authorize';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		mapGetters
	} from 'vuex';
	import {
		getDiy,
		getIndexData,
		getAppVersion,
		getUserCoupons
	} from '@/api/api.js';
	import {
		getShare,
		getconfig
	} from '@/api/public.js';
	import {
		getHomeData
	} from '@/api/home.js'
	import homeNavi from './components/homeNavi.vue';
	import homeSwiper from './components/homeSwiper.vue';
	import homeMenus from './components/homeMenus.vue';
	import homeCube from './components/homeCube.vue';
	import homeHot from './components/homeHot.vue';
	import homeArticle from './components/homeArticle.vue';
	// import homeVideo from './components/homeVideo.vue';
	import {configMap} from '@/utils/index';
	export default {
		// computed: {
		// 	...mapGetters(['viewColor', 'isLogin', 'routeError']),
		// },
		computed: configMap({share_title: ''},mapGetters(['isLogin', 'uid', 'viewColor','routeError'])),
		components: {
			homeNavi,
			homeSwiper,
			homeMenus,
			homeCube,
			homeHot,
			homeArticle,
			// homeVideo,
			// #ifndef H5
			passwordPopup,
			// #endif
			authorize
		},
		data() {
			return {
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				privacyStatus: false,
				errorNetwork: false,
				_options: {},
				windowHeight: 0,
				appUpdate: {},

				shopName: '互联网医院',
				logoUrl: '',
				medicalId: '',
				dataBanner: [],
				dataMenus: [],
				dataDoctor: [],
				dataArticle: [],
				dataVideo: [],
				is_show: 0,
			}
		},
		watch: {
			privacyStatus(n) {
				if (n) {
					uni.hideTabBar();
				} else {
					uni.showTabBar();
				}
			},
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: that.share_title,
				path: '/pages/guide/index?spid=' + that.uid
			};
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: that.share_title,
				query: {
					spid: that.uid
				},
				imageUrl: ''
			};
		},
		// #endif
		onLoad(options) {

			if (this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}

			let that = this;
			this._options = options;
			uni.getClipboardData({
				success: function (res) {
					
					if(res.data){
						console.log(res.data);
					}
				}
			});
			// uni.showModal({
			// 	title: '互联网医院想要获取粘贴',
			// 	content: '你允许这样做吗',
			// 	cancelText:'不允许粘贴',
			// 	confirmText:'允许粘贴'
			// 	success: function (res) {
			// 		if (res.confirm) {
			// 			console.log('用户点击确定');
			// 			console.log(res.data)
			// 		} else if (res.cancel) {
			// 			console.log('用户点击取消');
			// 		}
			// 	}
			// });
			// #ifdef APP-PLUS
			this.appVersionConfig(); //APP版本检测
			// #endif

			this.$nextTick(function() {
				uni.getSystemInfo({
					success: function(res) {
						that.windowHeight = res.windowHeight;
					}
				});
			});

			that.pageLoad(options);
			setTimeout(() => {
				that.isNodes++;
			}, 100);

		},
		onShow() {
			this.getConfig();
			// #ifdef APP-PLUS
			if (this.appUpdate.openUpgrade == '1') {
				this.alertAppUpdate();
			}
			// #endif

			if (this.isLogin) {
				this.getUserInfo();
			}
		},
		onPullDownRefresh() {
			console.log('rk==>refresh')
			this.getIndexConfig()
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true
			},
			// 授权回调
			onLoadFun() {
				this.isShowAuth = false
			},
			pageLoad(options) {
				let that = this;

				// #ifdef APP-PLUS
				try {
					let val = uni.getStorageSync('privacyStatus') || false;
					if (!val) {
						this.privacyStatus = true;
					}
				} catch (e) {}
				this.snycNetWork();
				// #endif

				// this.$nextTick(()=>{
				this.getIndexConfig()
				// })

				Promise.all([
					this.diyData(),
				]);
			},
			// 对象转数组
			objToArr(data) {
				let obj = Object.keys(data).sort();
				let m = obj.map(key => data[key]);
				return m;
			},
			diyData() {
				let that = this;
				getDiy().then(res => {
					setTimeout(() => {
						that.isNodes++;
					}, 0);
					that.errorNetwork = false
					uni.setNavigationBarTitle({
						title: res.data.title
					});
					let data = res.data;
					let styleConfig = that.objToArr(res.data.value);
					styleConfig.forEach((item, index, arr) => {
						if (item.name == 'headerSerch') {
							that.logoUrl = item.logoConfig.url;
						}
					});
					//console.log('rk==>[diy]'+JSON.stringify(res));
				});
			},
			/**
			 * 首页数据
			 */
			getIndexConfig() {

				getHomeData().then(res => {
					//console.log('rk==>[res]'+JSON.stringify(res));
					let hData = res.data;
					this.dataBanner = hData.banner;
					this.medicalId = hData.medical;
					this.dataDoctor = hData.doctor;
					this.dataArticle = hData.article;
					this.dataVideo = hData.video;
					this.hiddenSkeleton();

					// uni.setStorageSync('YY_Mer_Id','13');
				});
			},
			hiddenSkeleton() {
				uni.stopPullDownRefresh();
				setTimeout(() => {
					this.showSkeleton = false
				}, 500)
			},
			// 重新链接
			reconnect() {
				uni.getNetworkType({
					success: res => {
						this.errorNetwork = res.networkType === 'none';
						if (!this.errorNetwork) {
							this.pageLoad(this._options);
						}
					}
				});
			},
			snycNetWork() {
				uni.getNetworkType({
					success: res => {
						this.errorNetwork = res.networkType === 'none';
					}
				});
			},
			// 同意隐私协议
			confirmApp() {
				uni.setStorageSync('privacyStatus', true);
				this.privacyStatus = false;
			},
			// 关闭Model
			closeModel() {
				this.privacyStatus = false;
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.is_show = res.data.is_show;
					that.userInfo = res.data;
				});
			},
			// #ifdef APP-PLUS
			appVersionConfig() {
				var that = this;
				//app升级
				// 获取本地应用资源版本号
				getAppVersion().then(res => {
					that.$set(that.appUpdate, 'androidAddress', res.data.androidAddress);
					that.$set(that.appUpdate, 'appVersion', res.data.appVersion);
					that.$set(that.appUpdate, 'iosAddress', res.data.iosAddress);
					that.$set(that.appUpdate, 'openUpgrade', res.data.openUpgrade);
					plus.runtime.getProperty(plus.runtime.appid, function(inf) {
						let nowVersion = (inf.version).split('.').join('');
						let appVersion = (res.data.appVersion).split('.').join('');
						that.$set(that.appUpdate, 'alert', appVersion > nowVersion);
						that.alertAppUpdate();
					});
				})
			},
			alertAppUpdate() {
				if (this.appUpdate.alert) {
					uni.getSystemInfo({
						success: (res) => {
							uni.showModal({
								title: '更新提示',
								content: '发现新版本，是否前去下载?',
								showCancel: this.appUpdate.openUpgrade !=
									'1',
								cancelColor: '#eeeeee',
								confirmColor: '#FF0000',
								success: (response) => {
									if (response.confirm) {
										switch (res.platform) {
											case "android":
												plus.runtime.openURL(this
													.appUpdate
													.androidAddress);
												break;
											case "ios":
												plus.runtime.openURL(encodeURI(
													this.appUpdate
													.iosAddress));
												break;
										}
									}
								}
							});
						}
					})
				}
			},
			// #endif
			getConfig() {
				// 获取配置
				getconfig()
					.then(res => {
						let self = this;
						this.globalDatas = res.data;
						uni.$emit('configData', res.data);

					})
					.catch(err => {});
			},

		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.content {}

	.error-network {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		padding-top: 40rpx;
		background: #fff;
		padding-top: 30%;

		image {
			width: 414rpx;
			height: 336rpx;
		}

		.title {
			position: relative;
			top: -40rpx;
			font-size: 32rpx;
			color: #666;
		}

		.con {
			font-size: 24rpx;
			color: #999;

			.label {
				margin-bottom: 20rpx;
			}

			.item {
				margin-bottom: 20rpx;
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 508rpx;
			height: 86rpx;
			margin-top: 100rpx;
			border: 1px solid #d74432;
			color: #e93323;
			font-size: 30rpx;
			border-radius: 120rpx;
		}
	}

	.privacy-wrapper {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: #7f7f7f;

		.privacy-box {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 560rpx;
			padding: 50rpx 45rpx 0;
			background: #fff;
			border-radius: 20rpx;

			.title {
				text-align: center;
				font-size: 32rpx;
				text-align: center;
				color: #333;
				font-weight: 700;
			}

			.content {
				margin-top: 20rpx;
				line-height: 1.5;
				font-size: 26rpx;
				color: #666;

				navigator {
					display: inline-block;
					color: #e93323;
				}
			}

			.btn-box {
				margin-top: 40rpx;
				text-align: center;
				font-size: 30rpx;

				.btn-item {
					height: 82rpx;
					line-height: 82rpx;
					background: linear-gradient(90deg, #f67a38 0%, #f11b09 100%);
					color: #fff;
					border-radius: 41rpx;
				}

				.btn {
					padding: 30rpx 0;
				}
			}
		}
	}
</style>
